<template>
  <div class="shopCard">
    <p class="aa"><span vaule="Select" @click="cutSelect(item.iid)" :class="item.Select?'yes':'no'">✔</span></p>
    <p class="shopCard_img">
      <img :src="item.show.img" alt="">
    </p>
    <div class="shopCard_txt">
      <p class="shopCard_title">{{item.title}}</p>
      <p class="shopCard_Price">
        <span class="orgPrice">¥{{item.price}}</span>
        <span class="num">×{{item.num}}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "shopCard",
  props: ["item"],
  data() {
    return {
      Select: false,
    };
  },
  methods: {
    cutSelect(iid) {
      //改变对钩的样式
      this.$store.commit('changeSelect',iid)
    },
  },
};
</script>

<style lang="scss" scoped>
.shopCard {
  width: 100%;
  padding: 5px;
  display: flex;
  height: 126px;
  border-bottom: solid 1px #ccc;
  .aa {
    width: 30px;
    flex: 1;
    text-align: center;
    padding-top: 40px;
  }
  .shopCard_img {
    flex: 2;
    img {
      width: 80%;
      border-radius: 6px;
    }
  }
  .shopCard_txt {
    flex: 6;
    margin-left: 15px;
    .shopCard_title {
      font-size: 17px;
      color: #666;
    }
    .shopCard_Price {
      margin-top: 10px;
      .orgPrice {
        color: #ff6922;
        font-weight: 700;
        font-size: 20px;
      }
      .num {
        position: absolute;
        right: 15px;
        color: #777;
        font-size: 20px;
      }
    }
  }
  .yes {
    // width: 20px;
    // height: 20px;
    // display: inline-block;
    background: #ff7cb7;
    border-radius: 50%;
    padding: 1.5px 4px;
    color: #fff;
    font-size: 15px;
  }
  .no {
    border-radius: 50%;
    padding: 1.5px 4px;
    background: #fff;
    color: #777;
    font-size: 15px;
    border: #777 1px solid;
  }
}
</style>